昨天我們已經為資料加上一個新的狀態欄位，並且也更新的 api 的處理方式，接下來我們需要為我們的 Todo 加上查詢的功能。
一樣的流程，我們先分析一下這個功能的流程。
首先 user 會在一個輸入框輸入他想要查詢的資料，這邊可以衍生出 2 個分支。

1. 在 user 輸入的時候就進行查詢。
2. 在 user 輸入完畢後，點擊按鍵之後再進行查詢。
   接下來，我們接收到 user 需要查詢的資料，這邊也有 2 個分支。
3. 我們搜索的範圍限定在 title。
4. 我們的範圍除了 title 還包含了內容。
   接下來我們需要返回搜索到的資料。

這邊我們先以第一種，'在 user 輸入的時候就進行查詢'以及'我們搜索的範圍限定在 title'這兩個條件下去進行。

這邊先分析第一個階段，我們要如何在 user 輸入的時候進行查詢?
首先我們需要透過onChange監聽 user 的輸入資料，並且建立一個 filter 的 function，根據當前輸入的資料進行查詢。

那我們這個 function 該如何實現呢?

我們不能預設 user 會輸入甚麼資料，但是我們可以知道的是當 user 輸入第一個字的時候我們就會執行這個 function，並且我們要搜尋的是所有 todo 的 title。
所以我們可以透過使用onChange獲得的資料進行查詢。
但是我們需要確保兩件事情，因為 user 輸入的資料&title 會有大小寫的問題，所以我們要透過另一個 function 來確保我們的資料會是統一的。

const changeCase = (inputString, toLowerCase)=>{
  if (toLowerCase) {
    return inputString.toLowerCase();
  } else {
    return inputString.toUpperCase();
  }
}

這個function可以幫我們將輸入的字串根據後面的toLowerCase轉化為大/小寫的英文字母。
所以我們的onChange之中就會需要將title & user輸入的資料都透過這個function進行大小寫統一的處理。

所以我們的資料在進行比對之前都會經過changeCase這個function，

user輸入資料 => 經過changeCase => 開始比對
所有title進行比對之前 = > 經過changeCase => 開始比對
接下來我們就可以進行function的撰寫了~